import { Modal } from '@/desktop/components'
import { PreviewWord } from '@/desktop/components/words'
import type { Word } from '@/services/features/chat-flows'
import './PreviewWords.module.less'

export default function PreviewWords(props: { words: Word[] | null; onClose: () => void }) {
  const { words, onClose } = props

  return <Modal open={!!words} onCancel={onClose} width="600px" footer={null} styleName="modal">
    {words
      ? words.map((word, index) => <PreviewWord key={index} word={word} styleName="word" />)
      : null}
  </Modal>
}
